<template>
  <div>
    <Row>
      <Card style="width:100%" dis-hover="true">
        <span style="margin-left: 20px;">
          <b>操作人</b> &nbsp;
        </span>
        <Input v-model="params.name" placeholder="请输入" style="width: 200px" />
        <span style="margin-left: 50px;">
          <b>角色</b> &nbsp;
        </span>
        <Select v-model="params.kind" style="width:200px">
          <Option value="管理员">管理员</Option>
          <Option value="用户">用户</Option>
          <Option value="商家">商家</Option>
        </Select>
        <span style="margin-left: 50px;">
          <b>操作时间</b> &nbsp;
        </span>
        <DatePicker v-model="params.time" type="date" placeholder="选择日期" style="width: 200px"></DatePicker>

        <Button
          type="primary"
          size="default"
          shape="circle"
          icon="ios-search"
          style="margin-left: 130px;"
          @click="search"
        ></Button>
      </Card>
    </Row>
    <br />
    <Row>
      <Card style="width:100%" dis-hover="true">
        <Table border ref="selection" :columns="columns" :data="logList"></Table>
        <br />
        <Row>
          <b>共{{total}}条记录</b>&nbsp;&nbsp;
          <Button type="error" @click="removeAll">删除选中</Button>
          <Button type="primary" @click="exportExcel" style="margin-left: 50px">导出日志</Button>
          <Page :total="total" style="float: right" @on-change="changePage" />
        </Row>
      </Card>
    </Row>
  </div>
</template>
<script>
import * as logApi from "@/api/log.js";
import excel from "@/libs/excel";
export default {
  data() {
    return {
      logList: [],
      params: {
        name: "",
        kind: "",
        time: null,
        size: 10,
        page: 1
      },
      total: 0,
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "用户名",

          key: "username"
        },
        {
          title: "角色",

          key: "role"
        },
        {
          title: "URL",
          key: "url",
          width: "250"
        },
        {
          title: "方法",

          key: "action"
        },
        {
          title: "IP",

          key: "ip"
        },
        {
          title: "结果",

          key: "result"
        },
        {
          title: "操作时间",
          key: "creatTime",
          width: "150"
        },
        {
          title: "操作",
          key: "action",

          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.remove(params.row.id);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ]
    };
  },
  methods: {
    initList: function() {
      logApi.getLogList(this.params).then(res => {
        if (res.data.code == 200) {
          this.logList = res.data.data.list;
          this.total = res.data.data.total;
        }
      });
    },
    changePage: function(page) {
      this.params.page = page;
      this.initList();
    },
    search: function() {
      this.params.page = 1;
      this.initList();
    },
    remove: function(id) {
      logApi.remove(id).then(res => {
        if (res.data.code == 200) {
          this.$Message.success("删除成功");
          this.initList();
        } else {
          this.$Message.error("删除失败");
        }
      });
    },
    removeAll: function() {
      this.$Modal.confirm({
        title: "警告",
        content: "<p>您确定要删除这条记录吗?</p>",
        onOk: () => {
          const logList = this.$refs.selection.getSelection();
          logApi.removeAll(logList).then(res => {
            if (res.data.code == 200) {
              this.$Message.success("删除成功");
              this.initList();
            } else {
              this.$Message.error(res.data.message);
            }
          });
        },
        onCancel: () => {}
      });
    },
    exportExcel() {
      if (this.logList.length) {
        this.exportLoading = true;
        logApi.findAll().then(res => {
          if (res.data.code == 200) {
            const params = {
              title: [
                "用户名",
                "角色",
                "URL",
                "方法",
                "IP",
                "结果",
                "操作时间"
              ],
              key: [
                "username",
                "role",
                "url",
                "action",
                "ip",
                "result",
                "creatTime"
              ],
              data: res.data.data,
              autoWidth: true,
              filename: "日志列表"
            };
            excel.export_array_to_excel(params);
            this.exportLoading = false;
          } else {
            this.$Message.error("服务器未知错误");
          }
        });
      } else {
        this.$Message.info("表格数据不能为空！");
      }
    }
  },
  mounted() {
    this.initList();
  }
};
</script>
<style>
.hr {
  margin-top: 7px;
  *margin: 0;
  border: 0;
  color: grey;
  background-color: black;
  height: 1px;
}
</style>
